<template>
	<view>
		<!-- 顶部导航栏 -->
		<tn-nav-bar fixed backgroundColor="#ffffff">
			我的观看历史
		</tn-nav-bar>

		<!-- 安全区域处理 -->
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<!-- 标签导航 -->
			<view class="tab-container">
				<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: activeTab === index }]"
					@click="activeTab = index">
					{{ tab }}
				</view>
			</view>

			<!-- 内容区域 -->
			<view class="content-container">
				<!-- 医生列表 -->
				<view v-if="activeTab === 0" class="doctor-list">
					<view v-for="(doctor, index) in expertHistoryData" :key="index" class="doctor-card">
						<!-- 左侧头像区域 -->
						<view class="avatar-container">
							<image :src="doctor.avatar" class="avatar" />
							<view v-if="doctor.liveStatus" class="live-badge">直播中</view>
						</view>

						<!-- 中间信息区域 -->
						<view class="info-container">
							<view class="name-container">
								<text class="name">{{ doctor.name }}</text>
								<text class="department">{{ doctor.department }}</text>
							</view>
							<text class="hospital">{{ doctor.hospital }}</text>
						</view>

						<!-- 右侧按钮区域 -->
						<view class="action-container">
							<view class="btn-view" :class="{'btn-view-active': activeButtonIndex === index}"
								@click="expertInfo(doctor.id)">
								看作品
							</view>
						</view>
					</view>

					<!-- 空状态 -->
					<view v-if="expertHistoryData.length === 0 && expertLoadStatus === 'noMore'"
						class="empty-placeholder">
						<text>暂无观看历史</text>
					</view>

					<!-- 加载更多状态 -->
					<view class="loading-more-footer">
						<tn-load-more v-if="expertLoadStatus === 'loading'" :status="expertLoadStatus"
							loadingText="加载中..." />
						<tn-load-more v-if="expertLoadStatus === 'noMore'" :status="expertLoadStatus"
							noMoreText="没有更多了" />
					</view>
				</view>

				<!-- 视频列表 -->
				<view v-if="activeTab === 1" class="content-list">
					<!-- 瀑布流容器 -->
					<view class="waterfall-container">
						<block v-for="(item, index) in contentHistoryData" :key="index">
							<view class="waterfall-item" @click="toDetails(item)">
								<view class="tn-blogger-content__wrap">
									<view class="image-pic" :style="'background-image:url(' + item.coverImage + ')'">
										<view class="image-music">
										</view>
									</view>
									<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
										<text class="tn-blogger-content__label__desc">{{ item.title }}</text>
									</view>
									<view
										class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
										<view class="justify-content-item tn-flex tn-flex-col-center">
											<view>
												<view class="tn-color-gray">
													<text class="tn-blogger-content__count-icon tn-icon-star"></text>
													<text class="tn-padding-right-sm">{{ item.collectCount }}</text>
													<text class="tn-blogger-content__count-icon tn-icon-eye"></text>
													<text class="tn-padding-right-sm">{{ item.viewCount }}</text>
													<text class="tn-blogger-content__count-icon tn-icon-like"></text>
													<text class="">{{ item.likeCount }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>

					<!-- 空状态 -->
					<view v-if="contentHistoryData.length === 0 && contentLoadStatus === 'noMore'"
						class="empty-placeholder">
						<text>暂无观看内容</text>
					</view>

					<!-- 加载更多状态 -->
					<view class="loading-more-footer">
						<tn-load-more v-if="contentLoadStatus === 'loading'" :status="contentLoadStatus"
							loadingText="加载中..." />
						<tn-load-more v-if="contentLoadStatus === 'noMore'" :status="contentLoadStatus"
							noMoreText="没有更多了" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getContentsByUser,
		getHistoryExpertByUser
	} from '@/util/index.js'
	export default {
		data() {
			return {
				expertPage: 1, // 专家数据页码
				contentPage: 1, // 内容数据页码
				limit: 10, // 每页数量
				expertLoadStatus: 'more', // 专家数据加载状态
				contentLoadStatus: 'more', // 内容数据加载状态
				//查询类型:0:历史数据查询,1:收藏数据查询
				selectType: 0,
				contentHistoryData: [],
				expertHistoryData: [],
				activeTab: 0, // 当前激活的标签索引
				tabs: ["用户", "视频"],
				activeButtonIndex: null // 追踪激活的按钮索引
			}
		},
		onLoad() {
			console.log('开始加载数据')
			this.getExpertList()
			this.getContentList()
		},
		// 页面触底事件
		onReachBottom() {
			if (this.activeTab === 0) {
				this.loadMoreExpertData()
			} else if (this.activeTab === 1) {
				this.loadMoreContentData()
			}
		},
		methods: {
			// 加载更多专家数据
			async loadMoreExpertData() {
				if (this.expertLoadStatus === 'loading' || this.expertLoadStatus === 'noMore') return;

				this.expertLoadStatus = 'loading';
				this.expertPage++;

				try {
					const res = await getHistoryExpertByUser({
						page: this.expertPage,
						limit: this.limit
					});

					if (res.list && res.list.length > 0) {
						this.expertHistoryData = [...this.expertHistoryData, ...res.list];
						this.expertLoadStatus = res.total > this.expertHistoryData.length ? 'more' : 'noMore';
					} else {
						this.expertLoadStatus = 'noMore';
					}
				} catch (error) {
					console.error('加载更多专家数据失败', error);
					this.expertLoadStatus = 'more';
					this.expertPage--;
				}
			},

			// 加载更多内容数据
			async loadMoreContentData() {
				if (this.contentLoadStatus === 'loading' || this.contentLoadStatus === 'noMore') return;

				this.contentLoadStatus = 'loading';
				this.contentPage++;

				try {
					const res = await getContentsByUser({
						page: this.contentPage,
						limit: this.limit,
						selectType: this.selectType
					});

					if (res.list && res.list.length > 0) {
						this.contentHistoryData = [...this.contentHistoryData, ...res.list];
						this.contentLoadStatus = res.total > this.contentHistoryData.length ? 'more' : 'noMore';
					} else {
						this.contentLoadStatus = 'noMore';
					}
				} catch (error) {
					console.error('加载更多内容数据失败', error);
					this.contentLoadStatus = 'more';
					this.contentPage--;
				}
			},

			// 初始加载专家列表
			getExpertList() {
				this.expertPage = 1;
				this.expertHistoryData = [];
				this.expertLoadStatus = 'loading';

				getHistoryExpertByUser({
					page: this.expertPage,
					limit: this.limit
				}).then((res) => {
					if (res.list && res.list.length > 0) {
						this.expertHistoryData = res.list;
						this.expertLoadStatus = res.total > res.list.length ? 'more' : 'noMore';
					} else {
						this.expertLoadStatus = 'noMore';
					}
				})
			},

			// 初始加载内容列表
			getContentList() {
				this.contentPage = 1;
				this.contentHistoryData = [];
				this.contentLoadStatus = 'loading';

				getContentsByUser({
					page: this.contentPage,
					limit: this.limit,
					selectType: this.selectType
				}).then((res) => {
					if (res.list && res.list.length > 0) {
						this.contentHistoryData = res.list;
						this.contentLoadStatus = res.total > res.list.length ? 'more' : 'noMore';
					} else {
						this.contentLoadStatus = 'noMore';
					}
				})
			},

			toDetails(v) {
				let url;
				switch (v.contentType) { //0:图文,1视频,2:轮播图
					case '0':
						url = `../../articleVideo/Ti-details/Ti-details?id=${v.id}`
						break;
					case '1':
						url = `../../articleVideo/video-details/video-details?id=${v.id}`
						break;
					default:
						url = `../../articleVideo/swiper-details/swiper-details?id=${v.id}`
						break;
				}
				uni.navigateTo({
					url: url
				})
			},

			expertInfo(doctorId) {
				uni.navigateTo({
					url: `/templatePage/expert-info/expert-info?id=${doctorId}`
				})
			}
		}
	}
</script>

<style lang="less">
	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 20rpx;
			margin: 15rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 20rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #82B2FF;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 35rpx;
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 0 0;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 30rpx;
			padding-right: 5rpx;
		}
	}

	/* 文章内容 start*/
	.waterfall-container {
		column-count: 2;
		/* 列数 */
		column-gap: 0;
		/* 列间距 */
		width: 100%;
	}

	.waterfall-item {
		background-color: #FFFFFF;
		break-inside: avoid;
		overflow: hidden;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
		height: 260rpx;
	}

	/* 整体布局 */
	.tab-container {
		display: flex;
		background-color: #ffffff;
		border-bottom: 1px solid #f0f0f0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 16px 0;
		font-size: 16px;
		color: #666;
		position: relative;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		color: #1e87f0;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 3px;
		background-color: #1e87f0;
		border-radius: 2px;
	}

	.content-container {
		padding: 15px;
		background-color: #f7f8fa;
		min-height: 80vh;
	}

	/* 医生卡片样式 */
	.doctor-list {
		background-color: #ffffff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	}

	.doctor-card {
		display: flex;
		align-items: center;
		padding: 16px;
		border-bottom: 1px solid #f5f5f5;
	}

	.doctor-card:last-child {
		border-bottom: none;
	}

	.avatar-container {
		position: relative;
		width: 60px;
		height: 60px;
		margin-right: 12px;
		flex-shrink: 0;
		/* 禁止压缩 */
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #e0e6f0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1e87f0;
		font-weight: bold;
		font-size: 18px;
	}

	.live-badge {
		position: absolute;
		top: -5px;
		right: -5px;
		background-color: #e84949;
		color: white;
		padding: 2px 6px;
		border-radius: 12px;
		font-size: 10px;
		font-weight: 500;
		z-index: 2;
	}

	.info-container {
		flex: 1;
		min-width: 0;
		overflow: hidden;
	}

	.name-container {
		display: flex;
		flex-wrap: nowrap;
		align-items: baseline;
		margin-bottom: 6px;
		min-width: 0;
	}

	.name {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-right: 8px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex-shrink: 0;
	}

	.department {
		font-size: 13px;
		color: #666;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
		min-width: 0;
		padding-left: 8px;
	}

	.hospital {
		display: block;
		font-size: 13px;
		color: #999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
	}

	.action-container {
		margin-left: auto;
		flex-shrink: 0;
		/* 禁止压缩 */
	}

	.btn-view {
		padding: 6px 12px;
		border: 1px solid #e0e0e0;
		border-radius: 16px;
		font-size: 13px;
		color: #666;
		background-color: #f8f8f8;
		transition: all 0.2s ease;
	}

	.btn-view-active {
		background-color: #f0f0f0;
		transform: scale(0.95);
	}

	/* 空状态样式 */
	.empty-placeholder {
		text-align: center;
		color: #999;
		font-size: 14px;
		padding: 30px;
	}

	/* 加载更多状态样式 */
	.loading-more-footer {
		padding: 20rpx 0;
		text-align: center;
	}
</style>